<template>
	<div class="page_box">
		<!-- <canvas id="canvas"></canvas> -->
		<div id="index" ref="appRef">
			<div class="bg_set">
				
				<dv-loading v-if="loading">Loading...</dv-loading>
				
				
				<div v-else class="host-body">
					<div class="d-flex jc-center">
						<dv-decoration-10 class="dv-dec-10" :color="['#3779fd']" />
						<div class="d-flex jc-center">
							<dv-decoration-8 class="dv-dec-8" :color="['#3779fd', 'transparent ']" />
							<div class="title">
								<span class="title-text">喵星公民</span>
								<dv-decoration-6 class="dv-dec-6" :reverse="true" :color="['#50e3c2', '#67a1e5']" />
								<dv-decoration-5 class="dv-decoration" :color="['#3779fd', '#2d73ff']" />
							</div>
							<dv-decoration-8 class="dv-dec-8" :reverse="true" :color="['#3779fd', 'transparent']" />
						</div>
						<dv-decoration-10 class="dv-dec-10-s" :color="['#3779fd']" />
					</div>
					<!-- 第二行 -->
					<div class="d-flex jc-between px-2">
						<div class="d-flex aside-width">
							<div class="react-left ml-4 react-l-s">
								<div class="set_s2">当前在线设备：<span
										class="set_b co_a set_t">{{run_data[1].number}}</span>/<span
										class="set_b co_a">{{run_data[0].number}}</span>
								</div>
								<div class="set_s1">
									在线率：<div style="width: 50px; height: 50px; display: flex;box-sizing: border-box;">
										<pie_c :tips="rate_a.tips" :colorObj="rate_a.colorData" />
									</div>
								</div>
							</div>
							<dv-decoration-1 :color="['#ffffff', '#3779fd']" style="width:180px;height:50px;" />
						</div>
						<div class="d-flex-end aside-width">
							<dv-decoration-1 :color="['#ffffff', '#3779fd']"
								style="width:180px;height:50px; transform: rotateY(180deg);" />
							<div class="react-right mr-4 react-l-s">
								<span class="text">{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span>
							</div>

						</div>
					</div>
					<div class="body-box">
						<div class="content-box">
							<div>
								<div class="box-content">
									<div class="cont_li cont_la">
										<dv-border-box-12 :color="['rgb(138, 170, 251)', '#3779fd']">
											<div class="cont_set">
												<div class="bg-color-black">
													<div class="bot_title bot_ts">
														<div class="bot_l">
															<img class="bot_title_icon" alt=""
																src="@/assets/images/icon_03.svg" />
															<div class="bot_title_in">
																<span class="bot_title_set">清理统计</span>
																<dv-decoration-3 class="bot_title_div" />
															</div>
														</div>
														<div class="carousel">
															<div class="carousel-inner" @mouseover="pauseCarousel"
																@mouseleave="startCarousel">
																<div v-for="(item, index) in items"
																	@click="active_a(index)" :key="index"
																	class="carousel-item"
																	:class="{active: index === activeIndex}">
																	{{item}}
																</div>
															</div>
														</div>
													</div>
													<div class="board_box" @mouseover="pauseCarousel"
														@mouseleave="startCarousel">
														<dv-scroll-board class="board_in" :config="computedConfig" />
													</div>
												</div>
											</div>
										</dv-border-box-12>
									</div>
									<div class="l_mian">
										<div class="l_mian_li">
											<dv-border-box-13 :color="['rgb(138, 170, 251)', '#3779fd']">
												<div class="soso_box">
													<div class="bg-color-black">
														<div class="propo_set">
															<div class="bot_title bot_ts">
																<div class="bot_l">
																	<img class="bot_title_icon" alt=""
																		src="@/assets/images/icon_05.svg" />
																	<div class="bot_title_in">
																		<span class="bot_title_set">平均如厕时长</span>
																		<dv-decoration-3 class="bot_title_div" />
																	</div>
																</div>
																<div class="carousel">
																	<div class="carousel-inner"
																		@mouseover="pauseCarousel_b"
																		@mouseleave="startCarousel_b">
																		<div v-for="(item, index) in items"
																			@click="active_b(index)" :key="index"
																			class="carousel-item"
																			:class="{active: index === activeIndex_b}">
																			{{item}}
																		</div>
																	</div>
																</div>
															</div>
															<div class="propo_info" style="height: 100%;">
																<line_a v-if="activeIndex_b==0" :cdata="toilet_a" />
																<line_a v-if="activeIndex_b==1" :cdata="toilet_b" />
																<line_a v-if="activeIndex_b==2" :cdata="toilet_c" />
															</div>
														</div>
													</div>
												</div>
											</dv-border-box-13>
										</div>
										
										<div class="l_mian_li">
											<div class="carousel" style="    position: absolute; z-index: 999;
    right: -80px;">
												<div class="carousel-inner" style="flex-direction: column;
        align-items: baseline;"
													@mouseover="pauseCarousel_c"
													@mouseleave="startCarousel_c">
													<div v-for="(item, index) in typeArr"
														@click="active_type(index)" :key="index"
														class="carousel-item"
														:class="{active: index === activeIndex_type}">
														{{item}}
													</div>
												</div>
											</div>
											
											<dv-border-box-13 v-if="activeIndex_type==0" :color="['rgb(138, 170, 251)', '#3779fd']">
												<div class="soso_box">
													<div class="bg-color-black">
														<div class="propo_set">
															<div class="bot_title bot_ts">
																<div class="bot_l">
																	<img class="bot_title_icon" alt=""
																		src="@/assets/images/icon_05.svg" />
																	<div class="bot_title_in">
																		<span class="bot_title_set">深度杀菌数量</span>
																		<dv-decoration-3 class="bot_title_div" />
																	</div>
																</div>
																<div class="carousel">
																	<div class="carousel-inner"
																		@mouseover="pauseCarousel_c"
																		@mouseleave="startCarousel_c">
																		<div v-for="(item, index) in items"
																			@click="active_type(index)" :key="index"
																			class="carousel-item"
																			:class="{active: index === activeIndex_c}">
																			{{item}}
																		</div>
																	</div>
																</div>
															</div>
															
															<div class="propo_info" style="height: 100%;">
																<bar_c v-if="activeIndex_c==0" :cdata="depth_a" />
																<bar_c v-if="activeIndex_c==1" :cdata="depth_b" />
																<bar_c v-if="activeIndex_c==2" :cdata="depth_c" />
															</div>
														</div>
													</div>
												</div>
											</dv-border-box-13>
											
											<dv-border-box-13 v-if="activeIndex_type==1" :color="['rgb(138, 170, 251)', '#3779fd']">
												<div class="soso_box">
													<div class="bg-color-black">
														<div class="propo_set">
															<div class="bot_title bot_ts">
																<div class="bot_l">
																	<img class="bot_title_icon" alt=""
																		src="@/assets/images/icon_05.svg" />
																	<div class="bot_title_in">
																		<span class="bot_title_set">灯光勿扰数量</span>
																		<dv-decoration-3 class="bot_title_div" />
																	</div>
																</div>
																<div class="carousel">
																	<div class="carousel-inner"
																		@mouseover="pauseCarousel_c"
																		@mouseleave="startCarousel_c">
																		<div v-for="(item, index) in items"
																			@click="active_type(index)" :key="index"
																			class="carousel-item"
																			:class="{active: index === activeIndex_c}">
																			{{item}}
																		</div>
																	</div>
																</div>
															</div>
															
															<div class="propo_info" style="height: 100%;">
																<bar_c v-if="activeIndex_c==0" :cdata="depth_a" />
																<bar_c v-if="activeIndex_c==1" :cdata="depth_b" />
																<bar_c v-if="activeIndex_c==2" :cdata="depth_c" />
															</div>
														</div>
													</div>
												</div>
											</dv-border-box-13>
											
											<dv-border-box-13 v-if="activeIndex_type==2" :color="['rgb(138, 170, 251)', '#3779fd']">
												<div class="soso_box">
													<div class="bg-color-black">
														<div class="propo_set">
															<div class="bot_title bot_ts">
																<div class="bot_l">
																	<img class="bot_title_icon" alt=""
																		src="@/assets/images/icon_05.svg" />
																	<div class="bot_title_in">
																		<span class="bot_title_set">清理勿扰数量</span>
																		<dv-decoration-3 class="bot_title_div" />
																	</div>
																</div>
																<div class="carousel">
																	<div class="carousel-inner"
																		@mouseover="pauseCarousel_c"
																		@mouseleave="startCarousel_c">
																		<div v-for="(item, index) in items"
																			@click="active_type(index)" :key="index"
																			class="carousel-item"
																			:class="{active: index === activeIndex_c}">
																			{{item}}
																		</div>
																	</div>
																</div>
															</div>
															
															<div class="propo_info" style="height: 100%;">
																<bar_c v-if="activeIndex_c==0" :cdata="depth_a" />
																<bar_c v-if="activeIndex_c==1" :cdata="depth_b" />
																<bar_c v-if="activeIndex_c==2" :cdata="depth_c" />
															</div>
														</div>
													</div>
												</div>
											</dv-border-box-13>
											
											<dv-border-box-13 v-if="activeIndex_type==3" :color="['rgb(138, 170, 251)', '#3779fd']">
												<div class="soso_box">
													<div class="bg-color-black">
														<div class="propo_set">
															<div class="bot_title bot_ts">
																<div class="bot_l">
																	<img class="bot_title_icon" alt=""
																		src="@/assets/images/icon_05.svg" />
																	<div class="bot_title_in">
																		<span class="bot_title_set">自动清理数量</span>
																		<dv-decoration-3 class="bot_title_div" />
																	</div>
																</div>
																<div class="carousel">
																	<div class="carousel-inner"
																		@mouseover="pauseCarousel_c"
																		@mouseleave="startCarousel_c">
																		<div v-for="(item, index) in items"
																			@click="active_type(index)" :key="index"
																			class="carousel-item"
																			:class="{active: index === activeIndex_c}">
																			{{item}}
																		</div>
																	</div>
																</div>
															</div>
															
															<div class="propo_info" style="height: 100%;">
																<bar_c v-if="activeIndex_c==0" :cdata="depth_a" />
																<bar_c v-if="activeIndex_c==1" :cdata="depth_b" />
																<bar_c v-if="activeIndex_c==2" :cdata="depth_c" />
															</div>
														</div>
													</div>
												</div>
											</dv-border-box-13>
											
										</div>
										
									</div>
								</div>
							</div>
							<div class="map-box">
								<div class="map-title">
									<dv-decoration-3 style="width:120px;height:30px;" />
									<div class="box-title clear_title">累计清理</div>
									<dv-decoration-3 style="width:120px;height:30px;" />
									<div class="clear_all">
										<div class="clear_num">{{clear_info.total}}次</div>
									</div>
								</div>
								<div class="map2"></div>
								<div class="map3"></div>
								<div id="geo_main" style=" width: 100%; height: 100%;">
									<mapB :cdata="map_data"></mapB>
								</div>
							</div>
							<div class="box-r">
								<div style="width: 100%; height: 300px;">
									<dv-border-box-11 title="城市设备数量">
										<div class="scroll_rank">
											<div class="rank_box">
												<dv-scroll-ranking-board class="dv-scr-rank-board mt-1"
													:config="ranking" />
											</div>
										</div>
									</dv-border-box-11>
								</div>
								<div class="r-box">
									<div class="r-box-li">
										<dv-border-box-13 :color="['rgb(138, 170, 251)', '#3779fd']">
											<div class="soso_box">
												<div class="bg-color-black">
													<div class="propo_set">
														<div class="bot_title">
															<img class="bot_title_icon" alt=""
																src="@/assets/images/icon_07.svg" />
															<div class="bot_title_in">
																<span class="soso_title_set">灯光颜色选择</span>
																<dv-decoration-3 style="width: 50px; height: 24px;" />
															</div>
														</div>
														<div class="soso_info">
															<dv-active-ring-chart :config="color_info"
																style="width:140px; height: 140px;" />
														</div>
													</div>
												</div>
											</div>
										</dv-border-box-13>
									</div>
									<div class="r-box-li">
										<dv-border-box-13 :color="['rgb(138, 170, 251)', '#3779fd']">
											<div class="soso_box">
												<div class="bg-color-black">
													<div class="propo_set">
														<div class="bot_title">
															<img class="bot_title_icon" alt=""
																src="@/assets/images/icon_05.svg" />
															<div class="bot_title_in">
																<span class="soso_title_set">集便袋平均续航天数</span>
																<dv-decoration-3 style="width: 30px; height: 24px;" />
															</div>
														</div>
														<div class="propo_info" style="height: 100%;">
															<bar_b :cdata="reason_data" />
														</div>
													</div>
												</div>
											</div>
										</dv-border-box-13>
									</div>
									<div class="r-box-li">
										<dv-border-box-13 :color="['rgb(138, 170, 251)', '#3779fd']">
											<div class="soso_box">
												<div class="bg-color-black">
													<div class="propo_set">
														<div class="bot_title">
															<img class="bot_title_icon" alt=""
																src="@/assets/images/icon_05.svg" />
															<div class="bot_title_in">
																<span class="soso_title_set">单个集便袋平均续航次数</span>
																<dv-decoration-3 style="width:15px; height: 24px;" />
															</div>
														</div>
														<div class="propo_info" style="height: 100%;">
															<bar_a :cdata="reason_data" />
														</div>
													</div>
												</div>
											</div>
										</dv-border-box-13>
									</div>
									<div class="r-box-li">
										<dv-border-box-13 :color="['rgb(138, 170, 251)', '#3779fd']">
											<div class="soso_box">
												<div class="bg-color-black">
													<div class="propo_set">
														<div class="bot_title">
															<img class="bot_title_icon" alt=""
																src="@/assets/images/icon_05.svg" />
															<div class="bot_title_in">
																<span class="soso_title_set">深度杀菌使用情况</span>
																<dv-decoration-3 style="width: 20px; height: 24px;" />
															</div>
														</div>
														<div class="propo_info" style="height: 100%;">
															<bar_a :cdata="reason_data4" />
														</div>
													</div>
												</div>
											</div>
										</dv-border-box-13>
									</div>
								</div>
							</div>
						</div>
						<div class="bototm-box">
							<div class="bototm-left">
								<dv-border-box-12 :color="['rgb(138, 170, 251)', '#3779fd']">
									<div class="cont_set">
										<div class="bot_title">
											<img class="bot_title_icon" alt="" src="@/assets/images/icon_07.svg" />
											<div class="bot_title_in">
												<span class="bot_title_set">猫砂类别</span>
												<dv-decoration-1 style="width:50px;height:26px;" />
											</div>
										</div>
										<div class="active_box">
											<div class="active_li">
												<dv-active-ring-chart :config="config1"
													style="width:100px; height: 100px;" />
												<div class="active_title">实时</div>
											</div>
											<div class="active_li">
												<dv-active-ring-chart :config="config2"
													style="width:100px; height: 100px;" />
												<div class="active_title">月</div>
											</div>
											<div class="active_li">
												<dv-active-ring-chart :config="config3"
													style="width:100px; height: 100px;" />
												<div class="active_title">年</div>
											</div>
										</div>
										<div class="tag_a">
											<Label-Tag :config="labelConfig" />
										</div>
									</div>
								</dv-border-box-12>
							</div>
							<div class="bototm-left">
								<dv-border-box-12 :color="['rgb(138, 170, 251)', '#3779fd']">
									<div class="cont_set">
										<div class="bot_title">
											<img class="bot_title_icon" alt="" src="@/assets/images/icon_07.svg" />
											<div class="bot_title_in">
												<span class="bot_title_set">设备实时设置情况汇总</span>
												<dv-decoration-1 style="width:50px;height:26px;" />
											</div>
										</div>
										<div class="active_box">
											<div class="active_li">
												<div class="active_title_b">实时深度杀菌占比</div>
												<dv-charts class="ring-charts" style="width:100px;height:100px;"
													:option="ring_a" />
											</div>
											<div class="active_li">
												<div class="active_title_b">实时雾化杀菌/臭氧占比</div>
												<dv-charts class="ring-charts" style="width:100px;height:100px;"
													:option="ring_b" />
											</div>
											<div class="active_li">
												<div class="active_title_b">实时灯光勿扰占比</div>
												<dv-charts class="ring-charts" style="width:100px;height:100px;"
													:option="ring_c" />
											</div>
											<div class="active_li">
												<div class="active_title_b">实时清理勿扰占比</div>
												<dv-charts class="ring-charts" style="width:100px;height:100px;"
													:option="ring_d" />
											</div>
											<div class="active_li">
												<div class="active_title_b">实时舱门模式选择占比</div>
												<dv-charts class="ring-charts" style="width:100px;height:100px;"
													:option="ring_e" />
											</div>
											<div class="active_li">
												<div class="active_title_b">实时驱赶猫咪占比</div>
												<dv-charts class="ring-charts" style="width:100px;height:100px;"
													:option="ring_f" />
											</div>

										</div>
										<div class="tag_a">
											<Label-Tag :config="labelConfig2" />
										</div>
									</div>
								</dv-border-box-12>
							</div>
							<div class="bototm-left">
								<dv-border-box-12 :color="['rgb(138, 170, 251)', '#3779fd']">
									<div class="cont_set">
										<div class="bot_title">
											<img class="bot_title_icon" alt="" src="@/assets/images/icon_07.svg" />
											<div class="bot_title_in">
												<span class="bot_title_set">模式使用</span>
												<dv-decoration-1 style="width:50px;height:26px;" />
											</div>
										</div>
										<div class="active_box">
											<!-- <div class="active_li">
												<dv-active-ring-chart :config="con1"
													style="width:100px; height: 100px;" />
												<div class="active_title">实时</div>
											</div>
											<div class="active_li">
												<dv-active-ring-chart :config="con2"
													style="width:100px; height: 100px;" />
												<div class="active_title">月</div>
											</div>
											<div class="active_li">
												<dv-active-ring-chart :config="con3"
													style="width:100px; height: 100px;" />
												<div class="active_title">年</div>
											</div> -->
										</div>
										<div class="tag_a">
											<Label-Tag :config="label2" />
										</div>
									</div>
								</dv-border-box-12>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
	</div>
	

</template>

<script>
	import drawMixin from "../utils/drawMixin";
	import {
		formatTime
	} from '../utils/index.js';
	import pie_a from '@/components/echart/chart_pie/pie_a/chart';
	import pie_b from '@/components/echart/chart_pie/pie_b/chart';
	import bar_a from '@/components/echart/chart_bar/bar_a/chart';
	import bar_b from '@/components/echart/chart_bar/bar_b/chart';
	import bar_c from '@/components/echart/chart_bar/bar_c/chart';
	import map_a from "@/components/echart/chart_map/map_a/chart";
	import mapB from "@/components/echart/chart_map/mapB/chart";
	import pie_c from '@/components/echart/chart_pie/pie_c/chart';
	import pie_d from '@/components/echart/chart_pie/pie_d/chart';
	import line_a from '@/components/echart/chart_line/line_a/chart';
	import LabelTag from './LabelTag'
	
	export default {
		mixins: [drawMixin],
		components: {
			formatTime,
			pie_a,
			bar_a,
			bar_b,
			bar_c,
			pie_b,
			map_a,
			pie_c,
			pie_d,
			mapB,
			LabelTag,
			line_a,
		},
		data() {
			return {
				typeArr:['深度杀菌','灯光勿扰','清理勿扰','自动清理'],
				showModal:false,
				//自动轮播[清理]
				activeIndex: 0,
				items: ['日统计', '月统计', '年统计'],
				intervalId: null,
				clearconfig_0: {
					header: ['排名', '设备SN码', '次数'],
					data: [],
					rowNum: 5, //表格行数
					headerHeight: 38,
					headerBGC: 'rgba(19, 25, 47, 0.6)', //表头
					oddRowBGC: '#0f1325', //奇数行
					evenRowBGC: '#171c33', //偶数行
					index: false,
					columnWidth: [100, 300, 100],
					align: ['center', 'center', 'center']
				},
				clearconfig_1: {
					header: ['排名', '设备SN码', '次数'],
					data: [
						
					],
					rowNum: 5, //表格行数
					headerHeight: 38,
					headerBGC: 'rgba(19, 25, 47, 0.6)', //表头
					oddRowBGC: '#0f1325', //奇数行
					evenRowBGC: '#171c33', //偶数行
					index: false,
					columnWidth: [100, 300, 100],
					align: ['center', 'center', 'center']
				},
				clearconfig_2: {
					header: ['排名', '设备SN码', '次数'],
					data: [
						
					],
					rowNum: 5, //表格行数
					headerHeight: 38,
					headerBGC: 'rgba(19, 25, 47, 0.6)', //表头
					oddRowBGC: '#0f1325', //奇数行
					evenRowBGC: '#171c33', //偶数行
					index: false,
					columnWidth: [100, 300, 100],
					align: ['center', 'center', 'center']
				},

				//自动轮播[如厕]
				activeIndex_b: 0,
				intervalId_b: null,
				//日
				toilet_a: {
					name: '日平均如厕时长',
					scale: ['0时', '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时',
						'9时', '10时', '11时', '12时', '13时', '14时', '15时', '16时', '17时',
						'18时', '19时', '20时', '21时', '22时', '23时'
					],
					seriesData: [],
				},
				//月
				toilet_b: {
					name: '月平均如厕时长',
					scale: ['5-1', '5-2', '5-3', '5-4', '5-5', '5-6', '5-7', '5-8',
						'5-9', '5-10', '5-11', '5-12', '5-13',
						'5-14', '5-15', '5-16', '5-17', '5-18', '5-19', '5-20', '5-21', '5-22', '5-23',],
					seriesData: [],
				},
				//年
				toilet_c: {
					name: '年平均如厕时长',
					scale: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月',
						'9月', '10月', '11月', '12月'
					],
					seriesData: [],
				},
				//深度杀菌
				activeIndex_c: 0,
				activeIndex_type:0,
				intervalId_c: null,
				//日
				depth_a: {
					name: '日深度杀菌次数',
					scale: ['0时', '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时',
						'9时', '10时', '11时', '12时', '13时', '14时', '15时', '16时', '17时',
						'18时', '19时', '20时', '21时', '22时', '23时'
					],
					seriesData: [],
				},
				//月
				depth_b: {
					name: '月深度杀菌次数',
					scale: [],
					seriesData: [],
				},
				//年
				depth_c: {
					name: '年深度杀菌次数',
					scale: [
					],
					seriesData: [],
				},
						
				//猫砂数据
				//实时
				config1: {
					data: [],
					color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
					radius: '85%',
					activeRadius: '90%',
					lineWidth: 8,
					digitalFlopStyle: {
						fontSize: 20
					},
				},
				//月
				config2: {
					data: [],
					color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
					radius: '85%',
					activeRadius: '90%',
					lineWidth: 8,
					digitalFlopStyle: {
						fontSize: 20
					}
				},
				//年				
				config3: {
					data: [],
					color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
					radius: '85%',
					activeRadius: '90%',
					lineWidth: 8,
					digitalFlopStyle: {
						fontSize: 20
					}
				},
				labelConfig: {
					data: ['矿石猫砂', '膨润土', '混合猫砂', '豆腐猫砂']
				},
				//颜色
				color_info: {
					data: [],
					color: ['#d71345', '#102b6a', '#f15a22', '#ffc530', '#469f4b', '#f2eada'],
					radius: '85%',
					activeRadius: '90%',
					lineWidth: 13,
					digitalFlopStyle: {
						fontSize: 24
					}
				},
				//模式
				ring_a: {
					series: [{
						type: 'gauge',
						startAngle: -Math.PI / 2,
						endAngle: Math.PI * 1.5,
						arcLineWidth: 10,
						radius: '80%',
						data: [],
						axisLabel: {
							show: false
						},
						axisTick: {
							show: false
						},
						pointer: {
							show: false
						},
						backgroundArc: {
							style: {
								stroke: '#224590'
							}
						},
						details: {
							show: true,
							formatter: '{value}%',
							style: {
								fill: '#00baff',
								fontSize: 20
							}
						}
					}],
					color: ['#00baff']
				},
				ring_b: {
					series: [{
						type: 'gauge',
						startAngle: -Math.PI / 2,
						endAngle: Math.PI * 1.5,
						arcLineWidth: 10,
						radius: '80%',
						data: [],
						axisLabel: {
							show: false
						},
						axisTick: {
							show: false
						},
						pointer: {
							show: false
						},
						backgroundArc: {
							style: {
								stroke: '#224590'
							}
						},
						details: {
							show: true,
							formatter: '{value}%',
							style: {
								fill: '#00baff',
								fontSize: 20
							}
						}
					}],
					color: ['#00baff']
				},
				ring_c: {
					series: [{
						type: 'gauge',
						startAngle: -Math.PI / 2,
						endAngle: Math.PI * 1.5,
						arcLineWidth: 10,
						radius: '80%',
						data: [],
						axisLabel: {
							show: false
						},
						axisTick: {
							show: false
						},
						pointer: {
							show: false
						},
						backgroundArc: {
							style: {
								stroke: '#224590'
							}
						},
						details: {
							show: true,
							formatter: '{value}%',
							style: {
								fill: '#00baff',
								fontSize: 20
							}
						}
					}],
					color: ['#00baff']
				},
				ring_d: {
					series: [{
						type: 'gauge',
						startAngle: -Math.PI / 2,
						endAngle: Math.PI * 1.5,
						arcLineWidth: 10,
						radius: '80%',
						data: [],
						axisLabel: {
							show: false
						},
						axisTick: {
							show: false
						},
						pointer: {
							show: false
						},
						backgroundArc: {
							style: {
								stroke: '#224590'
							}
						},
						details: {
							show: true,
							formatter: '{value}%',
							style: {
								fill: '#00baff',
								fontSize: 20
							}
						}
					}],
					color: ['#00baff']
				},
				ring_e: {
					series: [{
						type: 'gauge',
						startAngle: -Math.PI / 2,
						endAngle: Math.PI * 1.5,
						arcLineWidth: 10,
						radius: '80%',
						data: [],
						axisLabel: {
							show: false
						},
						axisTick: {
							show: false
						},
						pointer: {
							show: false
						},
						backgroundArc: {
							style: {
								stroke: '#224590'
							}
						},
						details: {
							show: true,
							formatter: '{value}%',
							style: {
								fill: '#00baff',
								fontSize: 20
							}
						}
					}],
					color: ['#00baff']
				},
				ring_f: {
					series: [{
						type: 'gauge',
						startAngle: -Math.PI / 2,
						endAngle: Math.PI * 1.5,
						arcLineWidth: 10,
						radius: '80%',
						data: [],
						axisLabel: {
							show: false
						},
						axisTick: {
							show: false
						},
						pointer: {
							show: false
						},
						backgroundArc: {
							style: {
								stroke: '#224590'
							}
						},
						details: {
							show: true,
							formatter: '{value}%',
							style: {
								fill: '#00baff',
								fontSize: 20
							}
						}
					}],
					color: ['#00baff']
				},
				ring_g: {
					series: [{
						type: 'gauge',
						startAngle: -Math.PI / 2,
						endAngle: Math.PI * 1.5,
						arcLineWidth: 10,
						radius: '80%',
						data: [],
						axisLabel: {
							show: false
						},
						axisTick: {
							show: false
						},
						pointer: {
							show: false
						},
						backgroundArc: {
							style: {
								stroke: '#224590'
							}
						},
						details: {
							show: true,
							formatter: '{value}%',
							style: {
								fill: '#00baff',
								fontSize: 20
							}
						}
					}],
					color: ['#00baff']
				},
				labelConfig2: {
					data: ['开启', '关闭'],
					colors: ['#00baff', '#224590']
				},
				//模式使用
				//实时
				con1: {
					data: [{
							name: '标准模式',
							value: 356
						},
						{
							name: '幼猫模式',
							value: 215
						},
					],
					color: ['#00baff', '#3de7c9'],
					radius: '85%',
					activeRadius: '90%',
					lineWidth: 8,
					digitalFlopStyle: {
						fontSize: 20
					},
					activeTimeGap: 6000,
				},
				//月
				con2: {
					data: [{
							name: '标准模式',
							value: 1000
						},
						{
							name: '幼猫模式',
							value: 300
						},
					],
					color: ['#00baff', '#3de7c9'],
					radius: '85%',
					activeRadius: '90%',
					lineWidth: 8,
					digitalFlopStyle: {
						fontSize: 20
					},
					activeTimeGap: 6000,
				},
				//年				
				con3: {
					data: [{
							name: '标准模式',
							value: 356
						},
						{
							name: '幼猫模式',
							value: 215
						},
					],
					color: ['#00baff', '#3de7c9'],
					radius: '85%',
					activeRadius: '90%',
					lineWidth: 8,
					digitalFlopStyle: {
						fontSize: 20
					},
					activeTimeGap: 6000,
				},
				label2: {
					data: ['标准模式', '幼猫模式']
				},
				//城市设备排行榜
				ranking: {
					data: [],
					carousel: 'single',
					unit: '台'
				},
				//清理
				clear_info: {
					today: 1200, //今日
					yesterday: 3500, //昨日
					total: 0 //总计
				},
				//如厕(平均时长)
				shit_info: {
					yesterday: 160, //昨日
					month: 180, //月份
					year: 190 //年
				},
				//在线设备占比
				rate_a: {
					id: 'centerRate1',
					tips: 0,
					colorData: {
						textStyle: '#ff9800',
						series: {
							color: ['#faf3a378', 'transparent'],
							dataColor: {
								normal: '#ff9800',
								shadowColor: '#fcebad'
							}
						}
					},
				},
				//幼猫模式占比
				rate_b: {
					tips: 70,
					colorData: {
						textStyle: '#3fc0fb',
						series: {
							color: ['#00bcd44a', 'transparent'],
							dataColor: {
								normal: '#03a9f4',
								shadowColor: '#97e2f5'
							}
						}
					}
				},
				//清理勿扰模式
				rate_c: {
					tips: 60,
					colorData: {
						textStyle: '#3fc0fb',
						series: {
							color: ['#00bcd44a', 'transparent'],
							dataColor: {
								normal: '#03a9f4',
								shadowColor: '#97e2f5'
							}
						}
					}
				},
				//灯光勿扰模式
				rate_d: {
					tips: 10,
					colorData: {
						textStyle: '#3fc0fb',
						series: {
							color: ['#00bcd44a', 'transparent'],
							dataColor: {
								normal: '#03a9f4',
								shadowColor: '#97e2f5'
							}
						}
					}
				},
				//智能驱赶模式
				rate_e: {
					tips: 40,
					colorData: {
						textStyle: '#3fc0fb',
						series: {
							color: ['#00bcd44a', 'transparent'],
							dataColor: {
								normal: '#03a9f4',
								shadowColor: '#97e2f5'
							}
						}
					}
				},
				//深度杀菌
				rate_f: {
					tips: 90,
					colorData: {
						textStyle: '#3fc0fb',
						series: {
							color: ['#00bcd44a', 'transparent'],
							dataColor: {
								normal: '#03a9f4',
								shadowColor: '#97e2f5'
							}
						}
					}
				},
				//设备分布统计
				distri_data: {
					name: '地区统计',
					seriesData: [{
							value: 1140,
							name: '辽宁'
						},
						{
							value: 1180,
							name: '北京'
						},
						{
							value: 2302,
							name: '上海'
						},
						{
							value: 1200,
							name: '吉林'
						},
						{
							value: 2280,
							name: '深圳'
						},
						{
							value: 1080,
							name: '湖北'
						},
						{
							value: 880,
							name: '江苏'
						},
						{
							value: 600,
							name: '福建'
						},
						{
							value: 300,
							name: '江西'
						},
						{
							value: 100,
							name: '湖南'
						},
					]
				},
				//单个集便袋平均清理次数
				reason_data: {
					scale: ['1', '2', '3', '4', '5', '6', '7', '8',
						'9', '10', '11', '12',
					],
					seriesData: [],
					bubble: [{
							name: '1月',
							value: 10, //值
							xAxis: 0, //索引顺序
							yAxis: 10, //值
						},
						{
							name: '2月',
							value: 15,
							xAxis: 1,
							yAxis: 15
						},
						{
							name: '3月',
							value: 120,
							xAxis: 2,
							yAxis: 120
						},
						{
							name: '4月',
							value: 110,
							xAxis: 3,
							yAxis: 110
						},
						{
							name: '5月',
							value: 10,
							xAxis: 4,
							yAxis: 10
						},
						{
							name: '6月',
							value: 900,
							xAxis: 5,
							yAxis: 900
						},
						{
							name: '7月',
							value: 750,
							xAxis: 6,
							yAxis: 750
						},
						{
							name: '7月',
							value: 600,
							xAxis: 7,
							yAxis: 600
						},
						{
							name: '9月',
							value: 480,
							xAxis: 8,
							yAxis: 480
						},
						{
							name: '10月',
							value: 240,
							xAxis: 9,
							yAxis: 240
						},
						{
							name: '11月',
							value: 100,
							xAxis: 10,
							yAxis: 100
						},
						{
							name: '12月',
							value: 100,
							xAxis: 11,
							yAxis: 100
						}
					]
				},
				reason_data4: {
					scale: ['1', '2', '3', '4', '5', '6', '7', '8',
						'9', '10', '11', '12',
					],
					seriesData: [],
					
				},
				//猫砂种类占比
				propor_data: {
					name: '猫砂种类占比',
					seriesData: [{
							value: 30,
							name: '矿石猫砂'
						},
						{
							value: 20,
							name: '膨润土'
						},
						{
							value: 70,
							name: '豆腐猫砂'
						},
						{
							value: 30,
							name: '混合猫砂'
						},
					]
				},
				//加载
				loading: true,
				//日期时间数据
				timing: null,
				dateDay: null,
				dateYear: null,
				dateWeek: null,
				weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
				//工单滚动数据
				config: {
					header: ['工单号', '姓名', '级别', '维修原因'],
					data: [
						['2021120253511011', '李春阳', "一级隐患", "E1—点火故障"],
						['2021120253511011', '李春阳', "一级隐患", "E1—点火故障"],
						['2021120253511011', '李春阳', "一级隐患", "E1—点火故障"],
						['2021120253511011', '李春阳', "一级隐患", "E1—点火故障"],
						['2021120253511011', '李春阳', "一级隐患", "E1—点火故障"],
						['2021120253511011', '李春阳', "一级隐患", "E1—点火故障"],
						['2021120253511011', '李春阳', "一级隐患", "E1—点火故障"],
						['2021120253511011', '李春阳', "一级隐患", "烧不到设定的温度"],
						['2021120253511011', '李春阳', "一级隐患", "E1—点火故障"],
						['2021120253511011', '李春阳', "一级隐患", "E1—点火故障"],
						['2021120253511011', '李春阳', "一级隐患", "E1—点火故障"],
						['2021120253511011', '李春阳', "一级隐患", "E1—点火故障"],
						['2021120253511011', '李春阳', "一级隐患", "E1—点火故障"],
						['2021120253511011', '李春阳', "一级隐患", "E1—点火故障点火故障点火故障点火故障点火故障"],

					],
					rowNum: 12, //表格行数
					headerHeight: 48,
					headerBGC: 'rgba(255, 255, 255, 0.1)', //表头
					oddRowBGC: 'transparent', //奇数行背景颜色
					evenRowBGC: 'transparent', //偶数行背景颜色
					index: false, //是否显示索引值
					waitTime: 1800,
					columnWidth: [160, 100, 100, 150], //每列宽度
					align: ['center', 'center', 'center', 'center']
				},
				//设备统计
				run_data: [{
						name: '设备总数',
						number: ''
					},
					{
						name: '在线数量',
						number: ''
					},
					{
						name: '本日新增',
						number: '20'
					},
					{
						name: '本月新增',
						number: '300'
					},
				],
				//维保数量统计
				maint_data: {
					header: ['维保内容', '计划数量', '完成数量', '完成百分比'],
					data: [
						['入户巡查 ', '6250', "4936", "78%"],
						['安全检查 ', '6250', "4936", "78%"],
						['设备检修 ', '6250', "4936", "78%"],
						['用户培训 ', '6250', "4936", "78%"],
						['设备清洗 ', '6250', "3275", "52%"],
					],
				},
				//报修统计
				current_on: 0, //默认
				current_timer: null, // 定时器
				repair_data: ['982', '982', '982', '238'], //年，季，月，周
				//排行滚动
				realanimate: false,
				marginTop: 0,
				realtimer: null, // 定时器
				realData: [{
						name: '李春阳1',
						row: 1,
					},
					{
						name: '李春阳2',
						row: 2,
					},
					{
						name: '李春阳3',
						row: 3,
					},
					{
						name: '李春阳4',
						row: 4,
					},
					{
						name: '李春阳5',
						row: 5,
					},
					{
						name: '李春阳6',
						row: 6,
					},
					{
						name: '李春阳7',
						row: 7,
					},
					{
						name: '李春阳8',
						row: 8,
					},
					{
						name: '李春阳9',
						row: 9,
					},
					{
						name: '李春阳10',
						row: 10,
					},
				],
				//地图数据
				map_back: false, //返回按钮是否显示
				map_data: {
					name: '中国地图',
					json_url: '/full.json',
					//json_url: '../full.json',
					//https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json        ../../data/hbs_full.json
					mapJson: [ //Json数据
					],
					//地图点位数据
					geo_data: {
					},
					//点位信息
					/*
					adcode:编码
					name:名称
					total:总设备数
					fault:故障设备数
					repair:报修数量
					*/
					point_data: [
					
					
					]
				},
			}
		},
		created() {
			this.getUser()
			
			
			
			
		},
		unmounted() {
			this.pauseCarousel();
			this.pauseCarousel_b();
			this.pauseCarousel_c();
		},
		mounted: function() {
			//this.initCanvas();//背景动画
			
			// 当调整窗口大小时重绘canvas
			window.onresize = () => {
				//this.initCanvas();//背景动画
			};
			//报修统计tab定时切换
			// this.current_timer = setInterval(() => {
			// 	this.current_on += 1;
			// 	if (this.current_on > 3) {
			// 		this.current_on = 0;
			// 	}
			// }, 3500);
			//排行滚动
			//this.realtimer = setInterval(this.showNotice, 3000);
			
		},
		// 销毁定时器（离开页面）
		unmounted() {
			clearInterval(this.current_timer);
			this.current_timer = null;
		},
		//离开路由
		beforeUnmount() {
			clearInterval(this.timing);
			if (this.realtimer) {
				clearInterval(this.realtimer);
				this.realtimer = null;
			}
		},
		computed: {
			computedConfig() {
				return this['clearconfig_' + this.activeIndex];
			}
		},
		methods: {
			init() {
				//左边
				this.deviceNum() //统计机器
				this.getCleanData() //清理统计数据获取
				
				this.getToiletData() //获取平均如厕时长
				this.getSterilizeData() //获取深度杀菌数量(左边)
				
				//中间
				this.getPointData()
				
				//右边
				this.getCityDevice() //获取城市设备数量
				this.getLightData() //获取灯光颜色选择
				//this.getShitBoxAvgData() //集便袋平均续航天数
				//this.getOneShitBoxAvgData() //单个集便袋平均清理次数
				this.getMonthAvgCount() //深度杀菌使用情况 (右边)
				
				//下面
				this.catLitterData() //猫砂类别
				this.deviceStatusIng() //设备实时情况
				//this.deviceModelIng() //设备实时模式
				
				this.cancelLoading().then(() => {
					this.timeFn(); //时间计算
					//this.initCanvas();//背景动画
				})
				
				//定时
				// this.startCarousel();
				// this.startCarousel_b();
				// this.startCarousel_c();
			},
			
			getPointData(){
				this.$api.board.pointData.get().then(res => {
					this.map_data= {
						name: '中国地图',
						json_url: 'http://bendi.tatatest.dog8.cc/full.json',
						//json_url: '../full.json',
						//https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json        ../../data/hbs_full.json
						mapJson: [ //Json数据
						],
						//地图点位数据
						geo_data: res.data.province,
						//点位信息
						/*
						adcode:编码
						name:名称
						total:总设备数
						fault:故障设备数
						repair:报修数量
						*/
						point_data: res.data.data
					};
				})
				
				
			},
			
			getToiletData(){
				let type = this.activeIndex_b 
				this.$api.board.getToiletData.get({type:type}).then(res => {
					if(type==0){
						this.toilet_a.scale = res.data.categories
						this.toilet_a.seriesData = res.data.data
					}else if(type==1){
						this.toilet_b.scale = res.data.categories
						this.toilet_b.seriesData = res.data.data
					}else if(type==2){
						this.toilet_c.scale = res.data.categories
						this.toilet_c.seriesData = res.data.data
					}
					
				})
			},
			getSterilizeData(){
				
				
				let type = this.activeIndex_c
				this.$api.board.getSterilizeDataChat.get({type:type}).then(res => {
					if(type==0){
						this.depth_a.scale = res.data.categories
						this.depth_a.seriesData = res.data.data
					}else if(type==1){
						this.depth_b.scale = res.data.categories
						this.depth_b.seriesData = res.data.data
					}else if(type==2){
						this.depth_c.scale = res.data.categories
						this.depth_c.seriesData = res.data.data
					}
					
				}) 
				
				
			},
			//城市设备数量
			getCityDevice(){
				this.$api.board.getCityDevice.get().then(res => {
					console.log(res)
					this.ranking = {
						data: [],
						carousel: 'single',
						unit: '台'
					};
					this.ranking.data = res.data
				})
			},
			//灯光选择圆图
			getLightData(){
				
				this.$api.board.getLightData.get().then(res => {
					this.color_info={
						data: res.data,
						color: ['#d71345', '#102b6a', '#f15a22', '#ffc530', '#469f4b', '#f2eada'],
						radius: '85%',
						activeRadius: '90%',
						lineWidth: 13,
						digitalFlopStyle: {
							fontSize: 24
						}
					};
					
				})
			},
			getShitBoxAvgData(){
				this.$api.board.getShitBoxAvgData.get().then(res => {
					
				})
			},
			getOneShitBoxAvgData(){
				this.$api.board.getOneShitBoxAvgData.get().then(res => {
					
				})
			},
			getOneShitBoxAvgData(){
				this.$api.board.getOneShitBoxAvgData.get().then(res => {
					
				})
			},
			getMonthAvgCount(){
				this.$api.board.getMonthAvgCount.get().then(res => {
					this.reason_data4 = {
						scale: ['1', '2', '3', '4', '5', '6', '7', '8',
							'9', '10', '11', '12',
						],
						seriesData: res.data,
					};
					
					
					
				})
			},
			catLitterData(){
				this.$api.board.catLitterData.get({type:0}).then(res => {
					this.config1={
						data: res.data,
						color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
						radius: '85%',
						activeRadius: '90%',
						lineWidth: 8,
						digitalFlopStyle: {
							fontSize: 20
						},
						};
				})
				this.$api.board.catLitterData.get({type:1}).then(res => {
					this.config2={
						data: res.data,
						color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
						radius: '85%',
						activeRadius: '90%',
						lineWidth: 8,
						digitalFlopStyle: {
							fontSize: 20
						},
						};
				})
				this.$api.board.catLitterData.get({type:2}).then(res => {
					this.config3={
						data: res.data,
						color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
						radius: '85%',
						activeRadius: '90%',
						lineWidth: 8,
						digitalFlopStyle: {
							fontSize: 20
						},
						};
				})
			},
			deviceStatusIng(){
				this.$api.board.deviceStatusIng.get().then(res => {
					
					this.ring_a =  {
						series: [{
							type: 'gauge',
							startAngle: -Math.PI / 2,
							endAngle: Math.PI * 1.5,
							arcLineWidth: 10,
							radius: '80%',
							data: [res.data[0]],
							axisLabel: {
								show: false
							},
							axisTick: {
								show: false
							},
							pointer: {
								show: false
							},
							backgroundArc: {
								style: {
									stroke: '#224590'
								}
							},
							details: {
								show: true,
								formatter: '{value}%',
								style: {
									fill: '#00baff',
									fontSize: 20
								}
							}
						}],
						color: ['#00baff']
					};
					
					this.ring_b =  {
						series: [{
							type: 'gauge',
							startAngle: -Math.PI / 2,
							endAngle: Math.PI * 1.5,
							arcLineWidth: 10,
							radius: '80%',
							data: [res.data[1]],
							axisLabel: {
								show: false
							},
							axisTick: {
								show: false
							},
							pointer: {
								show: false
							},
							backgroundArc: {
								style: {
									stroke: '#224590'
								}
							},
							details: {
								show: true,
								formatter: '{value}%',
								style: {
									fill: '#00baff',
									fontSize: 20
								}
							}
						}],
						color: ['#00baff']
					};
					
					this.ring_c =  {
						series: [{
							type: 'gauge',
							startAngle: -Math.PI / 2,
							endAngle: Math.PI * 1.5,
							arcLineWidth: 10,
							radius: '80%',
							data: [res.data[2]],
							axisLabel: {
								show: false
							},
							axisTick: {
								show: false
							},
							pointer: {
								show: false
							},
							backgroundArc: {
								style: {
									stroke: '#224590'
								}
							},
							details: {
								show: true,
								formatter: '{value}%',
								style: {
									fill: '#00baff',
									fontSize: 20
								}
							}
						}],
						color: ['#00baff']
					};
					
					this.ring_d =  {
						series: [{
							type: 'gauge',
							startAngle: -Math.PI / 2,
							endAngle: Math.PI * 1.5,
							arcLineWidth: 10,
							radius: '80%',
							data: [res.data[3]],
							axisLabel: {
								show: false
							},
							axisTick: {
								show: false
							},
							pointer: {
								show: false
							},
							backgroundArc: {
								style: {
									stroke: '#224590'
								}
							},
							details: {
								show: true,
								formatter: '{value}%',
								style: {
									fill: '#00baff',
									fontSize: 20
								}
							}
						}],
						color: ['#00baff']
					};
					
					this.ring_e =  {
						series: [{
							type: 'gauge',
							startAngle: -Math.PI / 2,
							endAngle: Math.PI * 1.5,
							arcLineWidth: 10,
							radius: '80%',
							data: [res.data[4]],
							axisLabel: {
								show: false
							},
							axisTick: {
								show: false
							},
							pointer: {
								show: false
							},
							backgroundArc: {
								style: {
									stroke: '#224590'
								}
							},
							details: {
								show: true,
								formatter: '{value}%',
								style: {
									fill: '#00baff',
									fontSize: 20
								}
							}
						}],
						color: ['#00baff']
					};
					
					this.ring_f =  {
						series: [{
							type: 'gauge',
							startAngle: -Math.PI / 2,
							endAngle: Math.PI * 1.5,
							arcLineWidth: 10,
							radius: '80%',
							data: [res.data[5]],
							axisLabel: {
								show: false
							},
							axisTick: {
								show: false
							},
							pointer: {
								show: false
							},
							backgroundArc: {
								style: {
									stroke: '#224590'
								}
							},
							details: {
								show: true,
								formatter: '{value}%',
								style: {
									fill: '#00baff',
									fontSize: 20
								}
							}
						}],
						color: ['#00baff']
					};
					
				})
			},
			deviceModelIng(){
				this.$api.board.deviceModelIng.get().then(res => {
					
				})
			},
			
			
			deviceNum(){
				
				this.$api.device.datavice_num.get().then(res => {
						this.run_data[0]['number'] = res.info.total;
						this.run_data[1]['number'] = res.info.ing_count;
						this.clear_info.total = res.info.all_total;
						this.rate_a.tips = res.info.ratio;
					})
				
			},
			getUser(){
				let telephone=15040069301
				let code =123
				let data={mobile:telephone,code:code,type:'code'};
				this.$api.user.login.post(data).then(res => {
						
						localStorage.setItem('user', JSON.stringify(res.data.user) );
						localStorage.setItem('token', res.data.token);
						this.init()
					})
			},
			getCleanData(){
				let index = this.activeIndex;
				this.$api.device.statistic_data.get({type:index}).then(res => {
						
						if(index==0){
							this.clearconfig_0= {
								header: ['排名', '设备SN码', '次数'],
								data: [],
								rowNum: 5, //表格行数
								headerHeight: 38,
								headerBGC: 'rgba(19, 25, 47, 0.6)', //表头
								oddRowBGC: '#0f1325', //奇数行
								evenRowBGC: '#171c33', //偶数行
								index: false,
								columnWidth: [100, 300, 100],
								align: ['center', 'center', 'center']
							}
							this.clearconfig_0.data = res.data
						}else if(index==1){
							this.clearconfig_1= {
								header: ['排名', '设备SN码', '次数'],
								data: [],
								rowNum: 5, //表格行数
								headerHeight: 38,
								headerBGC: 'rgba(19, 25, 47, 0.6)', //表头
								oddRowBGC: '#0f1325', //奇数行
								evenRowBGC: '#171c33', //偶数行
								index: false,
								columnWidth: [100, 300, 100],
								align: ['center', 'center', 'center']
							}
							this.clearconfig_1.data = res.data
						}else if(index==2){
							this.clearconfig_2= {
								header: ['排名', '设备SN码', '次数'],
								data: [],
								rowNum: 5, //表格行数
								headerHeight: 38,
								headerBGC: 'rgba(19, 25, 47, 0.6)', //表头
								oddRowBGC: '#0f1325', //奇数行
								evenRowBGC: '#171c33', //偶数行
								index: false,
								columnWidth: [100, 300, 100],
								align: ['center', 'center', 'center']
							}
							this.clearconfig_2.data = res.data
						}
						
						
						
					})
			},
			
			//设备清理排行
			startCarousel() {
				
					
				if (this.intervalId) {
					clearInterval(this.intervalId);
				}
				// this.intervalId = setInterval(() => {
				// 	this.activeIndex = (this.activeIndex + 1) % this.items.length;
				// }, 10 * 2000 + 2100); // 轮播间隔时间  10 为整个数据数 比如10条
			},
			pauseCarousel() {
				if (this.intervalId) {
					clearInterval(this.intervalId);
					this.intervalId = null;
				}
			},
			active_a: function(e) {
				let index = this.activeIndex;
				let c_index = e;
				if (index == c_index) {
					return
				}
				this.activeIndex = c_index;
				this.getCleanData()
			},
			//如厕数据
			startCarousel_b() {
				if (this.intervalId_b) {
					clearInterval(this.intervalId_b);
				}
				// this.intervalId_b = setInterval(() => {
				// 	this.activeIndex_b = (this.activeIndex_b + 1) % this.items.length;
				// }, 20000); // 轮播间隔时间
			},
			pauseCarousel_b() {
				if (this.intervalId_b) {
					clearInterval(this.intervalId_b);
					this.intervalId_b = null;
				}
			},
			active_b: function(e) {
				let index = this.activeIndex_b;
				let c_index = e;
				if (index == c_index) {
					return
				}
				this.activeIndex_b = c_index;
				
				this.getToiletData()
			},
			//深度杀菌
			startCarousel_c() {
				if (this.intervalId_c) {
					clearInterval(this.intervalId_c);
				}
				// this.intervalId_c = setInterval(() => {
				// 	this.activeIndex_c = (this.activeIndex_c + 1) % this.items.length;
				// }, 20000); // 轮播间隔时间
			},
			pauseCarousel_c() {
				if (this.intervalId_c) {
					clearInterval(this.intervalId_c);
					this.intervalId_c = null;
				}
			},
			active_type: function(e) {
				let index = this.activeIndex_type;
				let c_index = e;
				if (index == c_index) {
					return
				}
				this.activeIndex_type = c_index;
				//this.getSterilizeData()
			},
			active_c: function(e) {
				let index = this.activeIndex_c;
				let c_index = e;
				if (index == c_index) {
					return
				}
				this.activeIndex_c = c_index;
				this.getSterilizeData()
			},
			mEnter() {
				clearInterval(this.realtimer)
			},
			mLeave() {
				// this.realtimer = setInterval(this.showNotice, 3000)
			},
			showNotice() {
				var that = this;
				that.marginTop = -42;
				setTimeout(function() {
					that.realData.push(that.realData[0])
					that.realData.shift()
					that.marginTop = 0
				}, 3000)
			},
			//维修统计切换
			to_current: function(e) {
				console.log(e)
				this.current_on = e;
			},
			
			timeFn() {
				// this.timing = setInterval(() => {
				// 	this.dateDay = formatTime(new Date(), 'HH:mm:ss')
				// 	this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
				// 	this.dateWeek = this.weekday[new Date().getDay()]
				// }, 0)
			},
			cancelLoading() {
				return new Promise((resolve) => {
					setTimeout(() => {
						this.loading = false
						resolve()
					}, 500)
				})
			},
			//背景动画
			initCanvas() {
				this.drawSmile()
			},
			//背景图表
			drawSmile() {
				var canvas = document.getElementById('canvas'),
					ctx = canvas.getContext('2d'),
					w = canvas.width = window.innerWidth,
					h = canvas.height = window.innerHeight,
					hue = 217,
					stars = [],
					count = 0,
					maxStars = 800; //星星数量
				var canvas2 = document.createElement('canvas'),
					ctx2 = canvas2.getContext('2d');
				canvas2.width = 100;
				canvas2.height = 100;
				var half = canvas2.width / 2,
					gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
				gradient2.addColorStop(0.025, '#CCC');
				gradient2.addColorStop(0.15, 'hsl(' + hue + ', 35%, 18%)');
				gradient2.addColorStop(0.25, 'hsl(' + hue + ', 35%, 6%)');
				gradient2.addColorStop(0.3, 'transparent');
				ctx2.fillStyle = gradient2;
				ctx2.beginPath();
				ctx2.arc(half, half, half, 0, Math.PI * 2);
				ctx2.fill();
				// End cache
				function random(min, max) {
					if (arguments.length < 2) {
						max = min;
						min = 0;
					}
					if (min > max) {
						var hold = max;
						max = min;
						min = hold;
					}
					return Math.floor(Math.random() * (max - min + 1)) + min;
				}

				function maxOrbit(x, y) {
					var max = Math.max(x, y),
						diameter = Math.round(Math.sqrt(max * max + max * max));
					return diameter / 2;
					//星星移动范围，值越大范围越小，
				}
				var Star = function() {
					this.orbitRadius = random(maxOrbit(w, h));
					this.radius = random(60, this.orbitRadius) / 8;
					//星星大小
					this.orbitX = w / 2;
					this.orbitY = h / 2;
					this.timePassed = random(0, maxStars);
					this.speed = random(this.orbitRadius) / 1000000;
					//星星移动速度
					this.alpha = random(2, 10) / 800;
					count++;
					stars[count] = this;
				}
				Star.prototype.draw = function() {
					var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
						y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
						twinkle = random(10);
					if (twinkle === 1 && this.alpha > 0) {
						this.alpha -= 0.025;
					} else if (twinkle === 2 && this.alpha < 1) {
						this.alpha += 0.02;
					}
					ctx.globalAlpha = this.alpha;
					ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
					this.timePassed += this.speed;
				}
				for (var i = 0; i < maxStars; i++) {
					new Star();
				}

				function animation() {
					ctx.globalCompositeOperation = 'source-over';
					ctx.globalAlpha = 0.5; //尾巴
					ctx.fillStyle = 'hsla(' + hue + ', 64%, 10%, 2)';
					ctx.fillRect(0, 0, w, h)
					ctx.globalCompositeOperation = 'lighter';
					for (var i = 1, l = stars.length; i < l; i++) {
						stars[i].draw();
					}
					window.requestAnimationFrame(animation);
				}
				animation();
			},
			//地图地区点击事件
			mapChanged(msg) {
				console.log(msg)
				let adcode = msg.data.adcode;
				//根据adcode 更改对应地点
				if (adcode == 130500) {
					this.map_data = this.sehi_xt;
					this.map_back = true;
				} else if (adcode == 130581) { //测试南宫
					this.map_data = this.sehi_ngs;
					this.map_back = true;
				} else if (adcode == 130530) { //测试新河县
					this.map_data = this.sehi_xhx;
					this.map_back = true;
				} else if (adcode == 130529) { //测试巨鹿县
					this.map_data = this.sehi_jlx;
					this.map_back = true;
				} else if (adcode == 130100) { //测试石家庄
					this.map_data = this.sehi_sjzs;
					this.map_back = true;
				} else if (adcode == 130109) { //测试石家庄
					this.map_data = this.sehi_gcq;
					this.map_back = true;
				}

			},
			//地图返回按钮事件
			mapBack(msg) {
				let adcode = msg;
				//根据adcode 更改返回按钮是否显示 和更改返回后的相关数据
				this.map_back = false;
				this.map_data = this.sehi_hb
			},
			//占比计算
			randomExtend(minNum, maxNum) {
				if (arguments.length === 1) {
					return parseInt(Math.random() * minNum + 1, 10)
				} else {
					return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
				}
			}
		},
	}
</script>

<style>
	#index {
		color: #d3d6dd;
		width: 1920px;
		height: 1080px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		transform-origin: left top;
		overflow: hidden;
	}

	.page_box {
		width: 100%;
		height: 100%;
		padding: 16px 16px 16px 16px;
		background: #000e22 url("../assets/images/page_bg.png");
		background-size: cover;
		background-position: center center;
	}

	.bg_set {
		width: 100%;
		height: 100%;
	}

	#top-header {
		position: relative;
		width: 100%;
		height: 100px;
		display: flex;
		justify-content: space-between;
		flex-shrink: 0;
		position: relative;

		.header-center-decoration {
			width: 40%;
			height: 60px;
			margin-top: 30px;
		}

		.header-left-decoration,
		.header-right-decoration {
			width: 25%;
			height: 60px;
		}

		.center-title {
			position: absolute;
			font-size: 30px;
			font-weight: bold;
			left: 50%;
			top: 15px;
			transform: translateX(-50%);
		}
	}

	/* 样式1 */
	* {
		margin: 0;
		padding: 0;
		list-style-type: none;
		outline: none;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.d-flex {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	}

	.jc-center {
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}

	.host-body .dv-dec-10,
	.host-body .dv-dec-10-s {
		width: 33.3%;
		height: 5px;
	}

	.dv-decoration-10 {
		width: 100%;
		height: 100%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	}

	.host-body .dv-dec-8 {
		width: 200px;
		height: 50px;
	}

	.dv-decoration-8 {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		width: 100%;
		height: 100%;
	}

	.host-body .title {
		position: relative;
		width: 500px;
		text-align: center;
		background-size: cover;
		background-repeat: no-repeat;
	}

	.host-body .title .title-text {
		font-size: 30px;
		font-weight: bold;
		position: absolute;
		bottom: 5px;
		width: 100%;
		left: 0px;
		/* 		left: 50%;
		-webkit-transform: translate(-50%);
		transform: translate(-50%); */

	}

	.host-body .title .dv-dec-6 {
		position: absolute;
		bottom: -24px;
		left: 50%;
		width: 250px;
		height: 8px;
		-webkit-transform: translate(-50%);
		transform: translate(-50%);
	}

	.dv-decoration-6 {
		width: 100%;
		height: 100%;
	}

	.host-body .dv-dec-10-s {
		-webkit-transform: rotateY(180deg);
		transform: rotateY(180deg);
	}

	.dv-decoration {
		width: 100%;
		position: absolute;
		left: 0;
		bottom: -65px;
	}

	.px-2 {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}

	.jc-between {
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}

	.host-body .aside-width {
		width: 40%;
	}

	.host-body .react-left.react-l-s {
		width: 500px;
		text-align: left;
	}

	.host-body .react-left {
		font-size: 18px;
		width: 300px;
		height: 50px;
		line-height: 50px;
		text-align: center;
		-webkit-transform: skewX(45deg);
		transform: skewX(45deg);
		background-color: rgba(255, 255, 255, 0.1);
		display: flex;
		align-items: center;
		padding-left: 30px;
		padding-right: 30px;
		justify-content: space-between;
		box-sizing: border-box;
	}

	.host-body .react-r-s,
	.host-body .react-l-s {
		background-color: rgba(255, 255, 255, 0.1);
	}

	.ml-4 {
		margin-left: 1rem;
	}

	.host-body .react-left .react-before {
		position: absolute;
		left: -25px;
		top: 0;
		height: 50px;
		width: 50px;
		background-color: rgba(255, 255, 255, 0.1);
		-webkit-transform: skewX(-45deg);
		transform: skewX(-45deg);
	}

	.host-body .react-left .text {
		display: inline-block;
		-webkit-transform: skewX(-45deg);
		transform: skewX(-45deg);
	}

	.host-body .react-right.react-l-s {
		/* text-align: right; */
		width: 500px;
	}

	.host-body .react-right {
		font-size: 18px;
		width: 300px;
		line-height: 50px;
		text-align: center;
		-webkit-transform: skewX(-45deg);
		transform: skewX(-45deg);
	}

	.host-body .react-right .react-after {
		position: absolute;
		right: -25px;
		top: 0;
		height: 50px;
		width: 50px;
		background-color: rgba(255, 255, 255, 0.1);
		-webkit-transform: skewX(45deg);
		transform: skewX(45deg);
	}

	.host-body .react-right .text {
		display: flex;
		height: 50px;
		align-items: center;
		justify-content: center;
		-webkit-transform: skewX(45deg);
		transform: skewX(45deg);
		font-size: 22px;
		color: #68d8fe;
		font-weight: bold;
	}

	.d-flex-end {
		display: flex;
		justify-content: flex-end;
	}

	.mr-4 {
		margin-right: 1rem;
	}

	.host-body {
		display: flex;
		flex-flow: column;
		height: 100%;
	}

	.host-body .body-box {
		margin-top: 16px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		flex: 1;
	}

	.host-body .body-box .content-box {
		display: grid;
		grid-template-columns: 4fr 6fr 4fr;
		flex: 1;

	}

	.host-body .body-box .bototm-box {
		display: grid;
		grid-template-columns: 3fr 8fr 3fr;

	}

	.border-box-12 {
		position: relative;
		width: 100%;
		height: 100%;
	}

	.box-content {
		position: relative;
		width: 100%;
		height: 100%;
		display: flex;
		flex-flow: column;
		justify-content: space-between;
	}


	.cont_la {
		padding: 0;
		height: 300px;

	}

	.cont_lb {
		padding: 0;
		height: 310px;
	}

	.cont_lc {
		padding: 0;
		height: 150px;
	}

	.cont_la .cont_set {
		padding: 15px;
		height: 100%;
		width: 100%;
		border-radius: 10px;
	}

	.cont_la .bg-color-black {
		border-radius: 10px;
		padding: 5px 0;
	}


	.cont_la .la_info {
		padding: 0 30px;
		width: 100%;
		height: 80px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.cont_la .la_info .la_item {
		flex: 1;
	}

	.la_item_num {
		font-size: 28px;
		font-weight: bold;
		color: #fff;
		font-family: 'Sansw7';
		padding-left: 15px;
	}

	.la_item_label {
		font-size: 16px;
		color: #4c9bfd;
		margin-top: 10%;
		display: flex;
		align-items: center;
	}

	.cont_lb .cont_set {
		padding: 15px;
		height: 310px;
		width: 100%;
	}

	.cont_lb .bg-color-black {
		height: 280px;
		background-color: rgba(19, 25, 47, 0.6);
		border-radius: 10px;
		padding: 5px 0;

	}

	.cont_lc .cont_set {
		padding: 15px;
		height: 150px;
		width: 100%;

	}

	.cont_lc .bg-color-black {
		height: 120px;
		background-color: rgba(19, 25, 47, 0.6);
		border-radius: 10px;
		padding: 5px 0;
	}

	/* 地球旋转 */
	.map-box {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.map-box .map2 {
		width: 400px;
		height: 400px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: url(../assets/images/lbx.png) no-repeat;
		background-size: 100%, 100%;
		opacity: 0.6;
		animation: rotate1 15s linear infinite;
	}

	@keyframes rotate1 {
		0% {
			transform: translate(-50%, -50%) rotate(0deg);
		}

		100% {
			transform: translate(-50%, -50%) rotate(360deg);
		}
	}

	.map-box .map3 {
		width: 430px;
		height: 430px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: url(../assets/images/jt.png) no-repeat;
		background-size: 100%, 100%;
		opacity: 0.6;
		animation: rotate2 10s linear infinite;
	}

	@keyframes rotate2 {
		0% {
			transform: translate(-50%, -50%) rotate(0deg);
		}

		100% {
			transform: translate(-50%, -50%) rotate(-360deg);
		}
	}

	.map-title {
		display: flex;
		align-items: center;
		width: 100%;
		justify-content: center;
		position: absolute;
		left: 0;
		top: 30px;
	}

	.box-title {
		font-size: 22px;
		height: 30px;
		line-height: 30px;
		margin: 0 0.5rem;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.box-title-zw {
		width: 24px;
		height: 24px;
		display: block;
		margin: 0 10px;
		border-radius: 24px;
	}

	/* 滚动 */
	.scroll_set {
		padding: 15px;
		height: 100%;
		width: 100%;
		border-radius: 10px;
	}

	.scroll_black {
		width: 100%;
		height: 540px;
		margin-top: 50px;
	}

	.dv-scroll-board .header {
		color: #68d8fe;
		text-align: center;
	}

	.dv-scroll-board .rows {
		color: #61a8ff;
		text-align: center;
	}

	.dv-scroll-board .rows .row-item {
		cursor: pointer;
	}

	.dv-scroll-board .rows .row-item:hover {
		color: #68d8ff;
		background: rgba(255, 255, 255, 0.1) !important;
	}

	.bot_a {
		padding: 20px 20px;
		height: 300px;
		width: 100%;
	}

	.bot_a_black {
		height: 260px;
	}

	.bot_title {
		padding: 0 10px;
		width: 100%;
		height: 30px;
		height: 30px;
		font-size: 14px;
	}

	.bot_info {
		width: 100%;
		height: 230px;
		display: flex;
		justify-content: space-between;
	}

	.bot_info_l {
		flex: 1;
		margin-right: 30%;
	}

	.bot_title {
		width: 100%;
		height: 30px;
		display: flex;
		align-items: center;
	}

	.bot_ts {
		justify-content: space-between;
	}

	.bot_l {
		height: 30px;
		display: flex;
		align-items: center;
	}

	.bot_title_icon {
		width: 20px;
		height: 20px;
		display: block;
	}

	.bot_title_in {
		display: flex;
		flex: 1;
		align-items: center;
	}

	.bot_title_set {
		font-size: 18px;
		color: #fff;
		margin: 0 6px;
	}

	.bot_mini_set {
		font-size: 14px;
		color: #0bace6;
		margin-left: 5px;
	}

	.bot_title_div {
		width: 110px !important;
		height: 26px !important;
	}

	.bot_info_r {
		position: absolute;
		right: 20px;
		top: 0;
		width: 28%;
		height: 300px;
		display: flex;
		flex-flow: column;
		align-items: center;
		justify-content: center;
	}

	.bot_itme {
		width: 100%;
		border-radius: 6px;
		margin: 6px 0;
		padding: 15px;
		height: 90px;
		background-color: rgba(19, 25, 47, 0.6);
		display: flex;
		flex-flow: column;
		justify-content: center;
	}

	.item_num {
		font-size: 28px;
		font-weight: bold;
		color: #fff;
		font-family: 'Sansw7';
	}

	.item_label {
		font-size: 16px;
		color: #4c9bfd;
		margin-top: 10%;
		display: flex;
		align-items: center;
	}

	.icon-dot {
		width: 10px;
		height: 10px;
		display: block;
		border-radius: 10px;
		margin-right: 5px;
	}

	.bot_num {
		font-size: 24px;
		line-height: 1;
		font-weight: bold;
		margin: 0 10px 8px;
		font-family: 'Sansw7';
		color: #fff;
	}

	.mainten_info {
		width: 100%;
		height: 230px;
		margin-top: 10px;
	}

	.mainten_head {
		height: 48px;
		width: 100%;
		padding: 0 20px;
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: rgba(255, 255, 255, 0.1);
	}

	.head_sli {
		flex: 1;
		font-size: 15px;
		color: #68d8fe;
		text-align: center;
	}

	.mainten_list {
		padding: 5px 20px 0;
		height: 182px;
		display: flex;
		align-items: center;
		flex-flow: column;
		justify-content: space-around;
	}

	.mainten_li {
		width: 100%;
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.ten_ue {
		font-size: 14px;
		flex: 1;
		text-align: center;
	}

	.ten_ue:first-child,
	.head_sli:first-child {
		text-align: left;
	}

	.ten_ue:first-child {
		color: #61a8ff
	}

	/* 报修统计 */
	.repair_ceo {
		width: auto;
		display: flex;
		align-items: center;
	}

	.ceo_li {
		padding: 0 18px;
		font-size: 18px;
		color: #1950c4;
		position: relative;
		cursor: pointer;
	}

	.ceo_li.current_on {
		color: #68d8fe;
		font-weight: bold;
	}

	.ceo_li:after {
		content: " ";
		position: absolute;
		right: 0;
		top: 0;
		width: 1px;
		bottom: 0;
		border-right: 1px solid #00f2f1;
		color: #00f2f1;
		-webkit-transform-origin: 100% 0;
		transform-origin: 100% 0;
	}

	.ceo_li:last-child:after {
		display: none;
	}

	.repair_info {
		margin-top: 5px;
		height: 75px;
		padding: 0 10px;

	}

	.repair_info .border-box-content {
		display: flex;
		align-items: center;
	}

	.repair_set {
		display: flex;
		align-items: baseline;
		padding: 0 20px;
	}

	.repair_set .repair_num {
		font-size: 28px;
		font-weight: bold;
		color: #fff;
		font-family: 'Sansw7';
		padding-left: 15px;
	}

	.repair_set .repair_label {
		font-size: 16px;
		color: #4c9bfd;
		display: flex;
		align-items: center;
	}

	/* 排行 */
	.ranking_box {
		width: 100%;
		height: 300px;
		padding: 15px;
	}

	.ranking_box .bg-color-black {
		height: 270px;
		padding: 5px 0;
		width: 100%;
		display: flex;
	}

	.ranking_set {
		width: 35%;
		margin-left: 2%;
	}

	.propo_set {
		flex: 1;
	}

	.propo_info {
		width: 100%;
		height: 240px;
	}

	.realData {
		width: 80%;
		height: 210px;
		margin-top: 15px;
		font-size: 12px;
		overflow: hidden;
		background-color: rgba(19, 25, 47, 0.6);
		border-radius: 10px;
		margin-left: 5px;
	}

	.real_li {
		width: 100%;
		height: 42px;
		line-height: 42px;
		display: flex;
		align-items: center;
		font-size: 14px;
		padding-left: 10px;
		cursor: pointer;

	}

	.real_icon {
		width: 38px;
		height: 38px;
		display: block;
		margin-right: 10px;
	}

	.real_sese {
		width: 30px;
		height: 30px;
		border-radius: 30px;
		margin-left: 4px;
		margin-right: 14px;
		background: rgba(255, 255, 255, 0.1);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		color: #4c9bfd;
		font-family: 'Sansw7';
	}

	.title-text {
		font-weight: bold;
	}

	.bg-color-blue {
		background: #0f1325;
	}

	.set_t {
		font-weight: bold;
	}

	.co_a {
		font-size: 28px;
	}

	.set_a {
		font-family: 'Sansw3';
	}

	.set_b {
		font-family: 'Sansw7'
	}

	.set_s1 {
		height: 50px;
		display: flex;
		align-items: center;
		transform: skewX(-45deg);
	}

	.set_s2 {
		display: flex;
		align-items: baseline;
		transform: skewX(-45deg);
	}

	/* 清理板块 */
	.clear_info {
		width: 100%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-ms-flex-pack: distribute;
		justify-content: space-around;
	}

	.clear_item {
		border-radius: 6px;
		margin-top: 8px;
		width: 32%;
		height: 70px;
		background-color: rgba(19, 25, 47, 0.6);
		display: flex;
		flex-flow: column;
		justify-content: center;
		align-items: center;

	}

	.clear_item_t {
		font-size: 15px;
	}

	.clear_item_n {
		font-size: 24px;
		font-weight: bold;
		font-family: 'Sansw7';
		line-height: 1;
		color: #33cea0;
	}

	.per_list {
		width: 100%;
		display: flex;
		align-items: center;
		padding-top: 20px;
		flex-wrap: wrap;
	}

	.per_item {
		width: 25%;
		display: flex;
		align-items: center;
		flex-flow: column;
		justify-content: center;
	}

	/* 总清理次数 */
	.clear_all {
		width: 100%;
		text-align: center;
		color: #f6f828;
		position: absolute;
		left: 0;
		right: 0;
		top: 40px;
		display: flex;
		flex-flow: column;
	}

	.clear_title {
		font-size: 20px;
		color: #f6f828;
	}

	.clear_num {
		font-size: 30px;
		font-family: 'Sansw7';
	}

	.active-ring-name {
		font-size: 12px !important;
		line-height: 20px;
		height: 20px !important;
	}


	.bototm-left {
		width: 100%;
		position: relative;
		height: 220px;
	}

	.bototm-left .cont_set {
		padding: 15px;
		height: 220px;
		width: 100%;
		border-radius: 10px;
		box-sizing: border-box;
	}

	.tag_a {
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 10px;
	}

	.active_box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 10px;
	}

	.active_li {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-flow: column;
		align-items: center;
		justify-content: space-between;
	}

	.active_title {
		font-size: 15px;
		margin-top: 4px;
	}

	.active_title_b {
		font-size: 15px;
		margin-bottom: 4px;
	}

	.ring-charts {
		height: 100px;
	}

	/* 排行滚动 */
	.scroll_rank {
		padding: 15px 30px;
		height: 100%;
		width: 100%;
		border-radius: 10px;
		box-sizing: border-box;
	}

	.rank_box {
		width: 100%;
		height: 220px;
		margin-top: 45px;
	}


	/* 清理切换 */
	.carousel-inner {
		display: flex;
		align-items: center;

	}

	.carousel-item {
		font-size: 14px;
		padding: 0 10px;
		height: 30px;
		background: rgba(19, 25, 47, 0.6);
		margin-right: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 4px;
		cursor: pointer;
	}

	.carousel-item:last-child {
		margin-right: 0;
	}

	.carousel-inner .active {
		background: #3779fd;
	}

	.board_box {
		height: 220px;
		border-radius: 10px;
	}

	.board_in {
		width: 100%;
		height: 220px;
		border-radius: 10px;
		margin-top: 15px
	}

	.dv-scroll-board .header {
		color: #33cea0 !important;
	}

	.box-r {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		flex-flow: column;
	}

	.r-box {
		width: 100%;
		flex: 1;
		display: grid;
		grid-gap: 0;
		grid-column: span 2;
		grid-template-columns: repeat(2, 1fr);
		box-sizing: border-box;
	}

	.r-box-li {
		width: 100%;
		height: 220px;
	}

	.soso_box {
		width: 100%;
		height: 220px;
		padding: 15px;
	}

	.soso_title_set {
		font-size: 16px;
		color: #fff;
		margin: 0 6px;
	}

	.soso_info {
		width: 100%;
		height: 150px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 左边 */
	.l_mian {
		width: 100%;
		flex: 1;
		display: grid;
		grid-gap: 0;
		grid-column: span 1;
		grid-template-columns: repeat(1, 1fr);
		box-sizing: border-box;
	}

	.l_mian_li {
		width: 100%;
		height: 220px;
	}
</style>